<template>
  <div class="domeclass">
    <div class="domeclass-top"></div>
    <div class="domeclass-content">
      <div style="display: flex">
        <div style="margin-left: 40px; display: flex; margin-top: 150px">
          <div>
            <div v-for="item in text" :key="item" style="margin-top: 10px">
              <span style="color: #fff; font-size: 24px">{{ item }}</span>
            </div>
          </div>
          <div
            style="
              background-color: #fff;
              height: 380px;
              width: 1px;
              margin-top: 30px;
              margin-left: 10px;
            "
          ></div>
          <div style="margin-top: 50px; margin-left: 10px">
            <div v-for="item in text2" :key="item" style="margin-top: 5px">
              <span style="color: #fff; font-size: 16px">{{ item }}</span>
            </div>
          </div>
        </div>
        <!-- <div> -->
        <div class="imgclass" style="width: 100%">
          <div>
            <!-- <img width="700px" src="../assets/images" alt="" /> -->
          </div>
          <div>
            <!-- <img
              style="transform: rotate(-12deg)"
              width="120"
              height="150"
              src="../image/fefdd855a2eaba15abf78d1cb1d3f1c.png"
              alt=""
            /> -->
          </div>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
export default {
  name: 'ProtectIndex',
  data() {
    return {
      text: ['保', '护', '动', '物', '，', '守', '护', '自', '然'],
      text2: [
        '我',
        '们',
        '致',
        '力',
        '于',
        '让',
        '我',
        '们',
        '的',
        '未',
        '来',
        '更',
        '美',
        '好',
        '！',
      ],
    }
  },

  mounted() {},

  methods: {},
}
</script>

<style lang="less" scoped>
.domeclass {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  background-color: #264653;
}
.domeclass-top {
  border-bottom: 1px solid #cfd7e5;
  border-left: 1px solid #cfd7e5;
  border-right: 1px solid #cfd7e5;
  background: #fff;
  background-color: #fff;
}
.domeclass-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  // overflow: auto;

  // background-color: pink;
}

.imgclass {
  display: flex;
  justify-content: space-between;
}
</style>
